<template>
	<view class="">
		<u-cell-group >
			<view class="u-p-x-10">
				<u-cell-item :arrow="false" @click="chooseAvatar">
					<view class="flex align-center" slot="icon">
						<u-avatar :src="userInfo.avatar" size="100" ></u-avatar>
					</view>
					<view class="flex flex-column u-m-l-20" slot="title">
						<text>{{userInfo.nickname}}</text>
						<text>{{userInfo.phone}}</text>
					</view>
				</u-cell-item>
				<u-cell-item title="昵称" :value="userInfo.nickname" @click="toChangeNickname"></u-cell-item>
				<u-cell-item title="性别" :value="userInfo.gender ==1?'男':'女'" @click="show = true"></u-cell-item>
				<!-- <u-cell-item title="出生日期" :value="userInfo.birthday_text" @click="show1 = true"></u-cell-item> -->
				<u-cell-item title="地址管理" @click='toAdd'></u-cell-item>
				<u-cell-item title="银行卡管理" @click="toBindCard"></u-cell-item>
				<!-- #ifdef APP-PLUS -->
				<u-cell-item title="检查更新" @click='toCheck'></u-cell-item>
				<!-- #endif -->
			</view>
		</u-cell-group>
		<u-cell-group class="u-m-t-10">
			<view class="u-p-x-10">
				<u-cell-item title="账号安全" @click="toSafe"></u-cell-item>
				<u-cell-item title="实名认证" @click="toCert"></u-cell-item>
				<!-- #ifdef MP-WEIXIN -->
					<u-cell-item title="绑定微信" @click='toBind'></u-cell-item>
				<!-- #endif -->
			</view>
		</u-cell-group>
		<view class="u-m-t-40">
    		<dy-button width="576rpx" size="default" @click="logOut">退出登录</dy-button>
		</view>
		<u-select v-model="show" :list="list" @confirm="confirm"></u-select>
		<u-picker v-model="show1" mode="time" @confirm="confirm1"></u-picker>
	</view>
</template>

<script>
	import { BaseCenterApi } from '@/api/serves.js'
	import { mapActions } from 'vuex'
	export default {
		data() {
			return {
				show: false,
				list: [
					{
						value: '1',
						label: '男'
					},
					{
						value: '0',
						label: '女'
					}
				],
				show1: false,
			}
		},
		onLoad() {
			// 监听从裁剪页发布的事件，获得裁剪结果 h5端是 base64的图片 app端是 blod格式
			uni.$on('uAvatarCropper', path => {
				let url = path
				// console.log('path', path);
				// #ifdef H5
			  BaseCenterApi.upload({image: url}).then(res=> {
			  	console.log('上传base64返回的路径', res);
			  	if(res.code == 1) {
			  		this._changeavatar(res.data)
			  	}
			  })
			  // #endif
			  // #ifdef MP-WEIXIN
				this.upload([{url: url}]).then(res=> {
					console.log('res', res);
					this._changeavatar(res[0])
				})
				// #endif
				// #ifdef APP-PLUS
				this.upload([{url: url}]).then(res=> {
					console.log('res', res);
					this._changeavatar(res[0])
				})
				// #endif
			})
		},
		methods: {
			...mapActions({
				upload:'user/upload'
			}),
			// 修改头像
			_changeavatar(avatar) {
				BaseCenterApi.changeavatar({avatar: avatar}).then(res=> {
					console.log('修改头像', res);
					if(res.code == 1) {
						this.$store.dispatch('user/getUserInfo')
					}
				})
			},
			// 头像裁剪
			chooseAvatar() {
				// 此为uView的跳转方法，详见"文档-JS"部分，也可以用uni的uni.navigateTo
				this.$u.route({
					// 关于此路径，请见下方"注意事项"
					url: '/uview-ui/components/u-avatar-cropper/u-avatar-cropper',
					params: {
						// 输出图片宽度，高等于宽，单位px
						destWidth: 300,
						// 裁剪框宽度，高等于宽，单位px
						rectWidth: 200,
						// 输出的图片类型，如果'png'类型发现裁剪的图片太大，改成"jpg"即可
						fileType: 'jpg',
					}
				})
			},
			confirm(e) {
				console.log(e);
				BaseCenterApi.changesex({gender: e[0].value ==1?1:2}).then(res=> {
					console.log('修改性别', res);
					this.$HideLoading()
					this.$Toast(res.msg)
					if(res.code == 1) {
						this.$store.dispatch('user/getUserInfo')
					}
				})
			},
			confirm1(e) {
				console.log(e);
				let birth = `${e.year}-${e.month}-${e.day}`
				BaseCenterApi.changeBirth({birth: birth}).then(res=> {
					console.log('修改生日', res);
					this.$HideLoading()
					this.$Toast(res.msg)
					if(res.code == 1) {
						this.$store.dispatch('user/getUserInfo')
					}
				})
			},
			logOut() {
				this.$store.dispatch('user/logOut')
			}, 
			toChangeNickname() {
				uni.navigateTo({
					url: '/pages/mine/settingInfo/settingNickname/settingNickname'
				})
			},
			toSafe() {
				uni.navigateTo({
					url: '/pages/mine/settingInfo/settingSafe/settingSafe'
				})
			},
			toCert() {
				uni.navigateTo({
					url: '/pages/mine/settingInfo/settingCert/settingCert'
				})
			},
			toAdd() {
				uni.navigateTo({ 
					url: '/pages/mine/settingInfo/settingAddress/settingAddress'
				})
			},
			toCheck() {
				uni.navigateTo({
					url: '/pages/mine/checkApp/checkApp'
				})
			},
			toBind() {
				uni.navigateTo({
					url: '/pages/mine/settingInfo/settingBind/settingBind'
				})
			},
			toBindCard(){
				uni.navigateTo({
					url: '/pages/mine/settingInfo/settingCardList/settingCardList'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
::v-deep .u-line-1 {
	font-size: 28rpx;
}
</style>
